<template>
  <div>
    <a-select :defaultValue="testData" style="width: 120px" @change="handleChange">
      <a-select-option value="jack">Jack</a-select-option>
      <a-select-option value="lucy">Lucy</a-select-option>
      <a-select-option value="disabled" disabled>Disabled</a-select-option>
      <a-select-option value="Yiminghe">yiminghe</a-select-option>
    </a-select>

    <div>我是被选中的value:{{ testData }}</div>

    <div>
      <a-select style="width: 120px" defaultValue="jeecg">
        <a-select-option v-for="(item,index) in options" :key="index" :value="item.value">{{ item.text }}</a-select-option>
      </a-select>
    </div>

    <div>

      <a-select mode="multiple" style="width:500px" :defaultValue="mutilData" @change="handleMultiChange">
        <a-select-option value="jack">Jack</a-select-option>
        <a-select-option value="lucy">Lucy</a-select-option>
        <a-select-option value="disabled">Disabled</a-select-option>
        <a-select-option value="Yiminghe">yiminghe</a-select-option>
      </a-select>
    </div>

    <div>我是多选的value:{{ mutilData }}</div>

  </div>
</template>

<script>
  export default {
    name: 'Select',
    data(){
      return {
        options:[],
        testData:"lucy",
        mutilData:['jack','Yiminghe']
      }
    },
    methods:{
      loadOptions(){
        this.options = [{
          text:"Jack",
          value:"jack"
        },{
          text:"Lucy",
          value:"Lucy"
        },{
          text:"yiminghe",
          value:"yiminghe"
        },{
          text:"jeecg",
          value:"jeecg"
        }]
      },
      handleChange(value){
        this.testData = value
      },
      handleMultiChange(value){
        this.mutilData = value
      }
    },
    created(){
      this.loadOptions()
    }
  }
</script>

<style scoped>

</style>